<template>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="门店名称">
                <j-input placeholder="输入商品名称模糊查询" v-model="queryParam.name"></j-input>
              </a-form-item>
            </a-col>
            <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="分站">
                <j-dict-select-tag placeholder="请选择分站" v-model="queryParam.siteId" dictCode="mk_site_basic,name,id"/>
              </a-form-item>
            </a-col>-->
            <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="店铺审核状态">
                <j-dict-select-tag placeholder="请选择状态" v-model="queryParam.status" dictCode="shop_audit_status"/>
              </a-form-item>
            </a-col>-->
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
  
      <!-- 操作按钮区域 -->
      <!-- <div class="table-operator">
        <a-button @click="handleAdd" v-has="'shop:add'" type="primary" icon="plus">新增</a-button>
        <a-button @click="batchDel" :disabled="selectedRowKeys.length == 0" v-has="'shop:delete'" icon="delete">删除
        </a-button>
      </div> -->
  
      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
            style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
  
        <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
          :dataSource="dataSource" :pagination="ipagination" :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" class="j-table-force-nowrap"
          @change="handleTableChange">
  
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="60px" alt=""
              style="max-width:100px;font-size: 12px;font-style: italic;" />
          </template>
          <span slot="isRest" slot-scope="text, record">
            <a-popconfirm :title="`确定将门店设置为${record.isRest==0?'休息状态':'营业状态'}吗?`" @confirm="() => onChangeIsRest(record)">
              <a-switch checked-children="营业" un-checked-children="休息" :checked="record.isRest === 0 ? true : false" />
            </a-popconfirm>
          </span>
          <span slot="action" slot-scope="text, record">
            <span v-has="'shop:edit'">
              <a @click="handleEdit(record)">编辑</a>
            </span>
            <span v-has="'shop:setting'">
              <a @click="setState(record)">设置</a>
            </span>
            <a-divider type="vertical" v-has="'shop:edit'" />
            <a-divider type="vertical" v-has="'shop:setting'" />
            <a @click="handleDetail(record)">详情</a>
            <!-- <a-dropdown>
              <a class="ant-dropdown-link">更多
                <a-icon type="down" /></a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="handleDetail(record)">详情</a>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown> -->
          </span>
  
        </a-table>
      </div>
      <!-- 设置弹窗 -->
      <a-modal title="设置店铺信息" :visible="showShopState" :confirm-loading="saveLoading" @ok="saveShopState"
        @cancel="showShopState=false" width="40%">
        <section>
          <a-form-model :label-col="labelCol" ref="shopStateForm" :model="shopStateInfor" :rules="stateRules"
            :wrapper-col="wrapperCol">
            <a-form-model-item label="店铺状态" prop="status" :required="true" v-show="shopStateInfor.audit==1">
              <j-search-select-tag dict="shop_status" v-model="shopStateInfor.status" placeholder="请选择店铺状态">
              </j-search-select-tag>
            </a-form-model-item>
            <a-form-model-item label="审核状态" prop="status" :required="true" v-show="shopStateInfor.audit!=1">
              <j-search-select-tag dict="audit" v-model="shopStateInfor.audit" placeholder="请选择店铺状态">
              </j-search-select-tag>
            </a-form-model-item>
            <a-form-model-item label="佣金比例" prop="commissionRate">
              <a-input-number :default-value="0" :min="0" :max="100" :formatter="value => `${value}%`"
                :parser="value => value.replace('%', '')" v-model="shopStateInfor.commissionRate" />
              <span>请填写1到100之间的数字</span>
            </a-form-model-item>
            <a-form-model-item label="店铺等级" prop="level">
              <j-search-select-tag dict="shop_level" placeholder="请设置店铺等级" v-model="shopStateInfor.level">
              </j-search-select-tag>
            </a-form-model-item>
            <a-form-model-item label="店铺评分" prop="grade">
              <a-input v-model="shopStateInfor.grade" placeholder="请输入店铺评分(0-5分制)" />
            </a-form-model-item>
            <a-form-model-item label="热门店铺" prop="isHot">
              <j-search-select-tag dict="shop_hot" placeholder="请设置是否热门店铺" v-model="shopStateInfor.isHot">
              </j-search-select-tag>
            </a-form-model-item>
            <a-form-model-item label="推荐店铺" prop="recommend">
              <j-search-select-tag dict="shop_recommend" placeholder="请设置是否推荐店铺" v-model="shopStateInfor.recommend">
              </j-search-select-tag>
            </a-form-model-item>
          </a-form-model>
        </section>
      </a-modal>
      <shop-basic-modal ref="modalForm" @ok="modalFormOk"></shop-basic-modal>
    </a-card>
  </template>
  
  <script>
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import ShopBasicModal from './modules/ShopTakeoutModal'
  import {
    filterMultiDictText
  } from '@/components/dict/JDictSelectUtil'
  import {
    httpAction,
    getAction,
    putAction,
    postAction,
    deleteAction
  } from '@/api/manage'
  export default {
    name: 'ShopBasicList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      ShopBasicModal
    },
    data() {
      return {
        description: '店铺信息表管理页面',
        showShopState: false,
        saveLoading: false,
        shopStateInfor: '',
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 4
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        stateRules: {
          status: [{
            required: true,
            message: '请选择店铺状态!',
            trigger: ['change', 'blur']
          }]
        },
        // 表头
        columns: [{
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '商家',
          align: "center",
          dataIndex: 'merchantId_dictText'
        },
        {
          title: '店铺名称',
          align: "center",
          dataIndex: 'name'
        },
        {
          title: '店铺logo',
          align: "center",
          dataIndex: 'logo',
          scopedSlots: {
            customRender: 'imgSlot'
          }
        },
        {
          title: '店铺状态',
          align: "center",
          dataIndex: 'status_dictText'
        },
        // {
        //   title: '审核状态',
        //   align: "center",
        //   dataIndex: 'audit_dictText'
        // },
        {
          title: '营业状态',
          align: "center",
          dataIndex: 'isRest_dictText',
          scopedSlots: { customRender: 'isRest' }
        },
        // {
        //   title: '佣金比例',
        //   align: "center",
        //   dataIndex: 'commissionRate'
        // },
        {
          title: '店铺类型',
          align: "center",
          dataIndex: 'type_dictText'
        },
        // {
        //   title: '店铺等级',
        //   align: "center",
        //   dataIndex: 'level_dictText'
        // },
        // {
        //   title: '店铺评级',
        //   align: "center",
        //   dataIndex: 'grade'
        // },
        // {
        //   title: '热门店铺',
        //   align: "center",
        //   dataIndex: 'isHot_dictText'
        // },
        // {
        //   title: '推荐店铺',
        //   align: "center",
        //   dataIndex: 'recommend_dictText'
        // },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: {
            customRender: 'action'
          }
        }
        ],
        url: {
          list: "/shop/shopBasic/list",
          delete: "/shop/shopBasic/delete",
          deleteBatch: "/shop/shopBasic/deleteBatch",
          exportXlsUrl: "/shop/shopBasic/exportXls",
          importExcelUrl: "shop/shopBasic/importExcel",
          editInfor: '/shop/shopBasic/edit',
          isRestChangeUrl: '/shop/shopBasic/restStatusChange'
        },
        dictOptions: {},
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      onChangeIsRest(record) {
        console.log(record)
        var that = this
        that.loading = true
        getAction(this.url.isRestChangeUrl + '/' + record.id).then(res => {
          if (res.success) {
            //重新计算分页问题
            record = res.result
            that.reCalculatePage(that.selectedRowKeys.length)
            that.$message.success(res.message)
            that.loadData()
            that.onClearSelected()
  
          } else {
            that.$message.warning('操作异常,请稍后再试')
          }
        }).finally(() => {
          that.loading = false
        })
  
      },
      initDictConfig() { },
      // 设置店铺属性
      setState(record) {
        this.showShopState = true;
        let str = JSON.stringify(record);
        this.shopStateInfor = JSON.parse(str);
        this.shopStateInfor.commissionRate = this.shopStateInfor.commissionRate * 100;
        console.log(this.shopStateInfor);
      },
      // 保存店铺属性
      saveShopState() {
        this.$refs.shopStateForm.validate(valid => {
          if (valid) {
            this.shopStateInfor.commissionRate = this.shopStateInfor.commissionRate / 100;
            this.saveLoading = true
            putAction(this.url.editInfor, this.shopStateInfor).then(res => {
              this.saveLoading = false;
              console.log(res);
              if (res.success) {
                this.getList();
                this.showShopState = false;
              }
            })
          }
        })
      },
      // 刷新列表
      getList() {
        getAction(this.url.list).then(res => {
          console.log(res);
          if (res.success) {
            this.dataSource = res.result.records;
          }
        })
      },
    }
  }
  </script>
  <style scoped>
  @import '~@assets/less/common.less';
  </style>